<template>
  <div id="viewQuestionView">
    <!--    <a-row :gutter="[24, 24]" style="width: 1900px">-->
    <a-col>
      <a-tabs default-active-key="question">
        <a-tab-pane key="question" title="题目">
          <a-card v-if="question" :title="question.title">
            <a-descriptions title="判题条件" :column="{ xs: 1, md: 2, lg: 3 }">
              <a-descriptions-item label="时间限制">
                {{ question.judgeConfig.timeLimit ?? 0 }}ms
              </a-descriptions-item>
              <a-descriptions-item label="空间限制">
                {{ question.judgeConfig.memoryLimit ?? 0 }}MB
              </a-descriptions-item>
              <!--              <a-descriptions-item label="堆栈限制">-->
              <!--                {{ question.judgeConfig.stackLimit ?? 0 }}-->
              <!--              </a-descriptions-item>-->
            </a-descriptions>
            <MdViewer :value="question.content || ''" />
            <template #extra>
              <a-space wrap>
                <a-tag
                  v-for="(tag, index) of question.tags"
                  :key="index"
                  color="green"
                  >{{ tag }}
                </a-tag>
              </a-space>
            </template>
          </a-card>
          <a-divider size="10" />
          <a-card v-if="question" title="">
            <CodeEditor
              :value="form.code as string"
              :language="form.language"
              :handle-change="changeCode"
            />
            <template #extra>
              <a-space wrap>
                <a-form :model="form" layout="inline">
                  <a-form-item field="language" style="width: 150px">
                    <a-select
                      v-model="form.language"
                      :style="{ width: '160px' }"
                      placeholder="选择编程语言"
                    >
                      <a-option>java</a-option>
                      <a-option>cpp</a-option>
                      <a-option>go</a-option>
                      <a-option>html</a-option>
                    </a-select>
                  </a-form-item>
                </a-form>
              </a-space>
            </template>
          </a-card>

          <a-divider size="0" />
          <a-button
            type="primary"
            status="success"
            shape="round"
            size="large"
            style="min-width: 200px"
            @click="doSubmit"
          >
            提交代码
          </a-button>
        </a-tab-pane>
        <a-tab-pane key="comment" title="评论" disabled> 评论区</a-tab-pane>
        <a-tab-pane key="answer" title="答案"> 暂时无法查看答案</a-tab-pane>
      </a-tabs>
    </a-col>
    <!--    </a-row>-->
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect, withDefaults, defineProps } from "vue";
import {
  OjQuestionControllerService,
  Question,
  QuestionControllerService,
  QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import MyMDEditor from "@/components/MyMDEditor.vue";
import MdViewer from "@/components/MdViewer.vue";
import CodeEditor from "@/components/CodeEditor";

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});

const question = ref<QuestionVO>();

const loadData = async () => {
  const res = await OjQuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  if (res.code === 0) {
    question.value = res.data;
  } else {
    message.error("加载失败，" + res.message);
  }
};

const form = ref<any>({
  language: "java",
  code: "",
});

/**
 * 提交代码
 */
const doSubmit = async () => {
  if (!question.value?.id) {
    return;
  }

  // const res = await QuestionSubmitControllerService.doQuestionSubmitUsingPost({
  //   ...form.value,
  //   questionId: question.value.id,
  // });
  // if (res.code === 0) {
  //   message.success("提交成功");
  // } else {
  //   message.error("提交失败," + res.message);
  // }
};

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const changeCode = (value: string) => {
  // form.value.code = value;
};
</script>

<style>
#viewQuestionView {
  width: 1000px;
  margin: 0 auto;
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
